<template>
  <div style="padding:20px">
    <el-card style="padding:20px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <el-row>
            <el-button type="primary" size="mini" @click="addRole">新增角色</el-button>
          </el-row>
          <!-- 表格 -->
          <el-table :data="roles" style="width: 100%;margin-bottom:20px">
            <el-table-column prop="date" label="序号" type="index" width="180" />
            <el-table-column prop="name" label="角色名称" width="180" />
            <el-table-column prop="description" label="描述" />
            <el-table-column align="center" label="操作" width="240">
              <template slot-scope="scope">
                <el-button size="small" type="success" @click="hAssign(scope.row.id)">分配权限</el-button>
                <el-button size="small" type="primary" @click="editRole(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="delRole(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <!-- 分页组件 -->
            <el-pagination
              background
              :total="total"
              layout="prev,pager,next"
              :page-size="pageParams.pagesize"
              @current-change="pageChange"
            />
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加弹层和表单 -->
    <el-dialog :title="isEdit?'编辑角色':'新增角色'" :visible.sync="showDialog">
      <AddDialog v-if="showDialog" ref="AddDialog" :row="row" :role-form="roleForm" :is-edit="isEdit" @success="success" @cancle="cancle" @hasEdit="hasEdit" />
    </el-dialog>
    <!-- 分配权限Dialog -->
    <el-dialog title="分配权限" :visible.sync="showDialogAssign">
      <AssignPermission ref="AssignPermission" @close="showDialogAssign=false" />
    </el-dialog>
  </div>
</template>

<script>
// import App from '@/App.vue'
import { getRoles, deleteRole } from '@/api/settings'
import AddDialog from './addDialog.vue'
import AssignPermission from './assignPermission.vue'
export default {
  name: '',
  components: { AddDialog, AssignPermission },
  // components: { App },
  data() {
    return {
      activeName: 'first',
      roles: [],
      pageParams: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      showDialog: false,
      showDialogAssign: false,
      isEdit: false,
      roleForm: {},
      row: {},
      roleId: ''
    }
  },
  computed: {
    // 表格中的最大页码
    maxnum() {
      // Math.ceil：向上取整
      return Math.ceil(this.total / this.pageParams.pagesize)
    },
    // 最后一页不是满的
    isLastPageFulled: function() {
      return this.total % this.pageParams.pagesize === 0
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    handleClick() {},
    async loadRoles() {
      const res = await getRoles(this.pageParams)
      this.roles = res.data.rows
      this.total = res.data.total
      console.log(res, '获取所有角色信息')
    },
    pageChange(curPage) {
      this.pageParams.page = curPage
      this.loadRoles()
    },
    delRole(id) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const result = await deleteRole(id)
        this.$message.success('删除成功')
        console.log(result, '删除角色')
        // 如果当前表格中只有一条，删除之后自动请求上一页数据
        if (this.roles.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }
        this.loadRoles()
      }).catch(e => e)
    },
    addRole() {
      this.showDialog = true
      this.isEdit = false
    },
    success() {
      this.showDialog = false
      // 如果表格最后一页是满的，想查看最新添加的数据，需要跳到最大页码的下一页
      if (this.isLastPageFulled) {
        this.pageParams.page = this.maxnum + 1
        this.total++
      } else {
        this.pageParams.page = this.maxnum
      }
      this.loadRoles()
    },
    cancle() {
      this.showDialog = false
    },
    editRole({ id, name, description }) {
      this.isEdit = true
      this.showDialog = true
      this.row = { id, name, description }
    },
    hasEdit() {
      this.loadRoles()
      this.showDialog = false
    },
    hAssign(id) {
      this.roleId = id
      this.showDialogAssign = true
      this.$nextTick(() => {
        this.$refs.AssignPermission.id = id
      })
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
